<template>
  <view class="login-container">
	  
	
    <!-- 背景装饰 -->
    <view class="bg-decoration top"></view>
    <view class="bg-decoration bottom"></view>
    
    <!-- 语言选择 -->
    <view class="lang-select">
      <text class="lang-text">{{ lang }}</text>
      <picker mode="selector" :range="langList" @change="onLangChange" class="picker-btn">
        <image src="/static/arrow-down.png" class="arrow-down"></image>
      </picker>
    </view>
    
	
	
	
    <!-- 登录卡片 -->
    <view class="login-card">
		<view class="top-logo-area">
		    <image 
		    src="/static/top-logo.jpg" 
		    class="top-logo"
		    @tap="handleLogoClick"
		  ></image>
		</view>
      <!-- 标题区域 -->
      <view class="title-area">
        <text class="login-title">普瑞设备管理系统</text>
        <text class="login-subtitle"></text>
      </view>
      
      <!-- 输入区域 -->
      <view class="input-container">
        <!-- 用户名输入框 -->
        <view class="input-group" :class="{ focused: usernameFocused }">
          <view class="icon-wrapper">
            <image src="/static/user-icon.png" class="input-icon"></image>
          </view>
          <input 
            type="text" 
            placeholder="请输入用户名" 
            v-model="username" 
            class="input" 
            @focus="usernameFocused = true"
            @blur="usernameFocused = false"
          />
        </view>
        
        <!-- 密码输入框 -->
        <view class="input-group" :class="{ focused: passwordFocused }">
          <view class="icon-wrapper">
            <image src="/static/lock-icon.png" class="input-icon"></image>
          </view>
          <input 
            :type="isPasswordHidden ? 'password' : 'text'" 
            placeholder="请输入密码" 
            v-model="password" 
            class="input" 
            @focus="passwordFocused = true"
            @blur="passwordFocused = false"
          />
          <button 
            class="toggle-btn" 
            @click="togglePasswordVisible"
            hover-class="toggle-btn-hover"
          >
            <image 
              src="/static/eye-icon.png" 
              class="eye-icon"
              :class="{ hidden: isPasswordHidden }"
            ></image>
            <image 
              src="/static/eye-close-icon.png" 
              class="eye-icon"
              :class="{ hidden: !isPasswordHidden }"
            ></image>
          </button>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <button 
        class="login-btn" 
        @click="handleLogin" 
        :disabled="!canLogin"
        hover-class="login-btn-hover"
      >
        <text class="login-btn-text">登录</text>
      </button>
      
      <!-- 辅助链接 -->
      <view class="link-group">
        <button class="link" hover-class="link-hover" @click="showFeatureTip">忘记登录密码</button>
        <text class="separator">|</text>
        <button class="link" hover-class="link-hover" @click="showFeatureTip">注册新账户</button>
      </view>
    </view>
    

  </view>
</template>

<script>
// 引入配置文件
import config from '../../config/index.js'
console.log("config："+JSON.stringify(config))
console.log("baseURL："+config.baseURL)
export default {
  data() {
    return {
      lang: '中文',
      langList: ['中文', 'English'],
      username: '',
      password: '',
      isPasswordHidden: true,
      usernameFocused: false,
      passwordFocused: false,
      
      // 隐藏功能相关
      clickCount: 0,
      clickTimer: null,
    };
  },
  computed: {
    canLogin() {
      return this.username.trim() !== '' && this.password.trim() !== '';
    }
  },
  methods: {
    // Logo点击计数功能
    handleLogoClick() {
		console.log("点击图标："+this.clickCount)
      this.clickCount++;
      
      // 清除之前的定时器
      if (this.clickTimer) {
        clearTimeout(this.clickTimer);
      }
      
      // 5秒内点击10次触发
      if (this.clickCount >= 10) {
        this.clickCount = 0;
        // 跳转到设备查询页面
        uni.navigateTo({
          url: '/pages/device-query/device-query'
        });
        return;
      }
      
      // 5秒后重置计数
      this.clickTimer = setTimeout(() => {
        this.clickCount = 0;
      }, 5000);
    },
    
    onLangChange(e) {
      this.lang = this.langList[e.detail.value];
    },
    
    togglePasswordVisible() {
      this.isPasswordHidden = !this.isPasswordHidden;
    },
    
// 登录处理
async handleLogin() {
  // 输入验证
  if (!this.username.trim()) {
    uni.showToast({ title: '请输入用户名', icon: 'none' });
    return;
  }
  
  if (!this.password.trim()) {
    uni.showToast({ title: '请输入密码', icon: 'none' });
    return;
  }
  
  // 显示加载提示
  uni.showLoading({
    title: '登录中...',
    mask: true
  });
  
  try {
    // 使用 Promise 方式处理请求，避免解构错误
    const res = await new Promise((resolve, reject) => {
      uni.request({
        url: `${config.baseURL}/login`,
        method: 'POST',
        data: {
          username: this.username,
          password: this.password
        },
        timeout: 10000,
        header: {
          'Content-Type': 'application/json'
        },
        success: (result) => {
          resolve(result);
        },
        fail: (error) => {
          reject(error);
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    });
    
    // 检查响应
    if (res && res.data) {
      const data = res.data;
      
      if (data.code === 0) {
        // 登录成功，保存用户信息
        uni.setStorageSync('token', data.data.token);
        uni.setStorageSync('username', data.data.username);
        uni.setStorageSync('userRole', data.data.role); // 保存用户角色
        
        uni.showToast({ 
          title: '登录成功', 
          icon: 'success',
          duration: 1500
        });
        
        // 跳转到产品列表页
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/product/product'
          });
        }, 1500);
      } else {
        uni.showToast({ 
          title: data.msg || '登录失败', 
          icon: 'none' 
        });
      }
    } else {
      uni.showToast({ 
        title: '登录失败，无效的响应', 
        icon: 'none' 
      });
    }
  } catch (error) {
    uni.hideLoading();
    console.error('登录失败', error);
    uni.showToast({ 
      title: '网络错误，请稍后重试', 
      icon: 'none' 
    });
  }
},

    
    // 显示功能未上线提示
    showFeatureTip() {
      uni.showToast({
        title: '此功能后续会上线，现在还没准备好',
        icon: 'none',
        duration: 2000,
        position: 'bottom'
      });
    }
  }
};
</script>

<style scoped>
/* 样式保持不变 */
.login-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 30rpx 30rpx 60rpx;
  background-color: #f8f9fa;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.bg-decoration {
  position: absolute;
  width: 600rpx;
  height: 600rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0f7fa, transparent 70%);
  z-index: 0;
}

.bg-decoration.top {
  top: -300rpx;
  left: -200rpx;
}

.bg-decoration.bottom {
  bottom: -300rpx;
  right: -200rpx;
  background: linear-gradient(135deg, #e3f2fd, transparent 70%);
}

.lang-select {
  display: flex;
  align-items: center;
  align-self: flex-end;
  margin-bottom: 40rpx;
  z-index: 1;
  padding-right: 10rpx;
}

.lang-text {
  font-size: 28rpx;
  color: #666;
}

.picker-btn {
  padding: 10rpx;
  margin-left: 10rpx;
}

.arrow-down {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.7;
}

.login-card {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 60rpx;
  z-index: 1;
}

.title-area {
  text-align: center;
  margin-bottom: 60rpx;
}

.login-title {
  font-size: 48rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 15rpx;
  display: inline-block;
}

.login-subtitle {
  font-size: 28rpx;
  color: #999;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
  margin-bottom: 60rpx;
}

.input-group {
  display: flex;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 16rpx;
  padding: 0 30rpx;
  height: 100rpx;
  transition: all 0.3s ease;
  border: 2rpx solid transparent;
}

.input-group.focused {
  background-color: #fff;
  border-color: #e0efff;
  box-shadow: 0 0 0 5rpx rgba(41, 128, 255, 0.05);
}

.icon-wrapper {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.input-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.7;
}

.input {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  color: #333;
  background-color: transparent;
}

.input::placeholder {
  color: #c0c4cc;
  font-size: 30rpx;
}

.toggle-btn {
  width: 50rpx;
  height: 50rpx;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.toggle-btn-hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.eye-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.eye-icon.hidden {
  display: none;
}

.login-btn {
  width: 100%;
  height: 108rpx;
  line-height: 108rpx;
  background-color: #2980ff;
  color: #fff;
  font-size: 34rpx;
  border-radius: 16rpx;
  margin-bottom: 40rpx;
  transition: all 0.3s ease;
  box-shadow: 0 5rpx 15rpx rgba(41, 128, 255, 0.3);
}

.login-btn-text {
  display: inline-block;
  transform: translateY(2rpx);
}

.login-btn:disabled {
  background-color: #c9d8e9;
  color: #fff;
  box-shadow: none;
}

.login-btn-hover:not(:disabled) {
  background-color: #1e6fe8;
  box-shadow: 0 8rpx 20rpx rgba(41, 128, 255, 0.4);
  transform: translateY(-2rpx);
}

.link-group {
  display: flex;
  justify-content: center;
  gap: 30rpx;
}

.link {
  font-size: 28rpx;
  color: #2980ff;
  background: transparent;
  border: none;
  padding: 5rpx 10rpx;
  border-radius: 8rpx;
  transition: all 0.2s;
  line-height: normal;
  height: auto;
}

.link-hover {
  background-color: rgba(41, 128, 255, 0.05);
}

.separator {
  color: #e0e0e0;
  font-size: 28rpx;
}



.top-logo-area {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.top-logo {
  width: 100%;
  height: 150rpx;
}
</style>
